<template>
  <form name="form" class="invoice-page-form form">
    <fieldset class="form-fieldset">
      <legend class="form-fieldset-legend">
        发票信息
      </legend>
      <div class="form-fieldset-content">
        <div class="form-control">
          <label class="form-control-label">
            发票金额
          </label>
          <input disabled id="companyName" :value="totalPriceTxt" type="text" class="form-control-input">
        </div>
        <div class="form-control">
          <label class="form-control-label">
            发票类型
          </label>
          <input disabled :value="formData.type == 'elec'?'电子发票(增值税普通发票)':'纸质发票(增值税专用发票)'" type="text" class="form-control-input">
        </div>
        <div class="form-control">
          <label class="form-control-label">
            开具类型
          </label>
          <div class="form-control-radio-group">
            <label>
              <input disabled id="companyName" :value="formData.isIndividuals==1?'企业单位':'个人/非企业单位'" type="text" class="form-control-input">
            </label>
          </div>
        </div>
        <div class="form-control">
          <label class="form-control-label" for="companyName">
            发票抬头
          </label>
          <input :value="formData.isIndividuals == 1?`${formData.companyName}`:'个人'" id="companyName" disabled type="text" placeholder="请输入企业名称" class="form-control-input">
        </div>
        <div class="form-control" v-if="formData.isIndividuals == 1">
          <label class="form-control-label" for="code">
            企业税号
          </label>
          <input id="code" disabled v-model.trim="formData.dutyParagraph" type="text" placeholder="请输入企业纳税人识别号" class="form-control-input">
        </div>
        <div class="form-control" v-if="formData.type=='paper'">
          <label class="form-control-label" for="payerBank">
            开户银行
          </label>
          <input id="payerBank" disabled v-model.trim="formData.payerBank" type="text" placeholder="请输入基本开户银行名称" class="form-control-input">
        </div>
        <div class="form-control" v-if="formData.type=='paper'">
          <label class="form-control-label" for="payerAccount">
            开户账号
          </label>
          <input id="payerAccount" disabled v-model.trim="formData.payerAccount" type="text" placeholder="请输入基本开户账号" class="form-control-input">
        </div>
        <div class="form-control" v-if="formData.type=='paper'">
          <label class="form-control-label" for="payerAddress">
            注场地址
          </label>
          <input id="payerAddress" disabled v-model.trim="formData.payerAddress" type="text" placeholder="请输入注册场所地址" class="form-control-input">
        </div>
        <div class="form-control" v-if="formData.type=='paper'">
          <label class="form-control-label" for="payerPhoneNumber">
            固定电话
          </label>
          <input id="payerPhoneNumber" disabled v-model.trim="formData.payerPhoneNumber" type="text" placeholder="请输入注册固定电话" class="form-control-input">
        </div>
        <div class="form-control">
          <label class="form-control-label" for="remark">
            备注内容
          </label>
          <input id="remark" disabled v-model.trim="formData.remark" type="text" placeholder="请输入备注内容" class="form-control-input">
        </div>
      </div>
    </fieldset>

    <fieldset class="form-fieldset">
      <legend class="form-fieldset-legend">
        接收方式
      </legend>
      <div class="form-fieldset-content">
        <template v-if="formData.type === 'elec'">
          <div class="form-control">
            <label class="form-control-label" for="email">
              接收邮箱
            </label>
            <input id="email" disabled v-model.trim="formData.email" type="text" placeholder="请输入接收邮箱" class="form-control-input">
          </div>
        </template>
        <template v-else>
          <div class="form-control">
            <label class="form-control-label" for="consignee">
              收货人
            </label>
            <input id="consignee" disabled v-model.trim="formData.consignee" type="text" placeholder="请输入收货人姓名" class="form-control-input">
          </div>
          <div class="form-control">
            <label class="form-control-label" for="phoneNumber">
              联系电话
            </label>
            <input id="phoneNumber" disabled v-model.trim="formData.phoneNumber" type="text" placeholder="请输入联系电话" class="form-control-input">
          </div>
          <div class="form-control">
            <label class="form-control-label" for="address">
              收货地址
            </label>
            <input id="address" disabled :value="areaAddress" type="text" placeholder="请输入详细地址" class="form-control-input">
          </div>
        </template>
      </div>
    </fieldset>
  </form>
</template>
<script>
export default {
  props: ["formData", "totalPrice"],
  computed: {
    totalPriceTxt() {
      return `${this.totalPrice || 0}元`;
    },
    areaAddress() {
      return `${this.formData.area}  /  ${this.formData.address}`;
    }
  }
};
</script>
